<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="../../css/bootstrap.min.css" >
    <link rel = "stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../control/assest/css/dashboard.css">
    <link rel = stylesheet href="../control/assest/js/dashboard.js">
    <style type="text/css">
        body,html{
            margin: 0;
            height: 100%;
        }


    </style>
    <title>Control</title>
</head>
<body>
<div id = "show" style="height: 100%;">
    <div class="container-fluid">
        <div class = "row">
        <div v-for="item in list" class="card col-3 mt-2">

                <img :src="imageUrl(item)" style="width: 60% ;height: 50% " class="mx-auto" alt = "wrong!">

            <hr>
            <h3 class = "align-content-center text-center" style="color: #1E9FFF"> {{item.item_name}}</h3>
            <p style="height: 20%;white-space: nowrap;text-overflow:ellipsis;overflow:hidden;">{{item.item_desc}}</p>
            <div class="container-fluid mb-3">
                <div class="row">
                    <h4 class="col-6" style="color: #ffb85c">￥{{item.item_price}}</h4>

                    <button class="col-5 text-center mb-1 ml-2 btn btn-primary" @click="openItem(item.item_id)">详情</button>
                </div>

            </div>

        </div>
        </div>
    </div>


    <div id="upload-avatar" style="display: none;padding:10px;">

        <div style="height: 700px;width: 1000px;">

            <ul class="list-group text-center align-content-center">
                <li class="list-group-item">商品名称：{{currentItem.item_name}}</li>
                <li class="list-group-item">商品价格：￥{{currentItem.item_price}}</li>
                <li class="list-group-item">
                        <img :src="imageUrl(currentItem)" style="width: 80%" class="mx-auto align-content-center" alt="wrong!">
                </li>
                <li class="list-group-item">{{currentItem.item_desc}}</li>
                <li class="list-group-item">{{currentItem.item_label}}</li>
            </ul>
            <div class = "container-fluid mt-1 mb-2">
                <div class = "row">
                    <div class = "col-4"></div>
                    <button class="btn btn-danger col-4 mx-auto" @click = "posty(currentItem)" >删除</button>
                </div>
            </div>


        </div>






    </div>

    <input v-show="false" type="file" ref="fileInput" @change="handleFile" />


</div>


<script src="../../js/jquery-3.6.0.slim.min.js" ></script>
<script src="../../js/bootstrap.bundle.min.js" ></script>
<script src="../../js/vue.global.js"></script>
<script src="../../js/axios.min.js"></script>
<script src="../../layer/layer.js"></script>
<script src="../../js/my-axios.js"></script>

<script>

    const show = {
        data(){
            return{

                list:[],
                currentItem:{

                },//当前商品信息

                currentFile:null,//当前图片文件
                currentImgUrl:null,//当前图片路径
            }

        },
        methods:{
            getItemList(){
                myAxios.get('/con/get_items').then((res)=>{
                    this.list = res.data.data;
                    console.log(res.data.data);
                })
            },
            posty(item){
                myAxios.post('/con/deleteItem',item).then((res)=>{

                })
            },
            openItem(item_id){

                //获取当前商品的相关信息
                this.currentItem = this.list.find(item => item.item_id == item_id)
                layer.open({
                    type:1,
                    title:false,
                    content:$('#upload-avatar')
                });
            },
            imageUrl(item){
                console.log(item.item_image);
                if (item.item_image == undefined)
                    return "https://img0.baidu.com/it/u=2612811943,923465408&fm=26&fmt=auto&gp=0.jpg"
                else
                    return "http://localhost:8080/xjw_war_exploded/item/avatar?filename=" + item.item_image;
            }
        },
        created(){
            this.getItemList();
        }
    };
    Vue.createApp(show).mount('#show')


</script>

</body>
</html>